<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
// 根据id删除数据
const handleDelete = (id: number) => {
  // //通过 id 进行删除数组中的 对应项 → filter（不会改变原数组，需重新赋值）
  list.value = list.value.filter(v =>v.id !== id)
  
  // 另一种删法 通过findIndex 查找到索引，再通过splice（）删除也可以。
  // const index = list.value.findIndex(v => v.id === id)
  // list.value.splice(index,1)
}

// 可以用reactive 定义字段明确的对象
const bookInfo = reactive({
 id:0,
 name:'',
 author:''
})
const addBook = () =>{
  // 生成唯一 id 值
  bookInfo.id = Date.now()
  // 把图书信息添加到数组中（需要浅拷贝创建新对象）

 // 浅拷贝方式1 在鸿蒙里不支持
  // list.value.push({...bookInfo})

  // 浅拷贝方式2 将一个或多个源对象中的属性（bookInfo）复制到前面的目标对象 {} 中，并返回修改后的目标对象
  // 温馨提示：鸿蒙中禁用了 Object.assign() 方法
  //  1. 鸿蒙如何实现深/浅拷贝：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkts-94-V5
  //  2.鸿蒙如何合并两个对象：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkts-61-V5
  list.value.push(Object.assign({},bookInfo))
  bookInfo.name = ''
  bookInfo.author = ''
} 
</script>


<template>
  <div id="app">
    <h3>黑马书架</h3>
    <div>
      <input type="text" v-model="bookInfo.name" placeholder="请输入书名">
      <input type="text" v-model="bookInfo.author" placeholder="请输入作者">
      <button @click="addBook()">添加</button>
      <p>{{ bookInfo }}</p>
    </div>
    <ol>
      <li v-for="(item,index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="handleDelete(item.id)">删除</button>
        <!-- <button @click="handleDelete(index)">删除</button> -->
      </li>
    </ol>
  </div>
</template>